<template>
  <div class="main relative">
    <div class="main-box" v-show="!isClosed">
      <div class="f aic">
        <el-avatar :size="50" :src="tearcher.filePath" />
        <div class="ml10">
          <div>{{ tearcher.teacherName }}</div>
          <div class="mt10 f12 opacity7">
            {{ tearcher.functionalDescription }}
          </div>
        </div>
        <div class="close" @click="close">
          <el-icon color="#93999F" size="20"><CloseBold /></el-icon>
        </div>
      </div>
      <div class="mt20 mb20 introduce f12 opacity7">
        {{ tearcher.teacherIntroduction }}
      </div>
      <div class="related-courses">
        <div class="mb10">章节目录</div>
        <div class="modal-box f14">
          <div class="chapter-box scrollbar">
            <div
              class="mb5 fff"
              v-for="(item, index) in dataObj.courseChapterList"
            >
              <div class="mb5 fff">{{ item.chapterName }}</div>
              <div
                v-for="(itemSon, indexSon) in item.courseSubsectionList"
                style="display: flex; align-items: center"
              >
                <span
                  :class="'chapter-video ' + itemSon.active"
                  @click="updateParentData(itemSon)"
                  >{{ index + 1 }}.{{ indexSon + 1 }}
                  {{ itemSon.subsectionName }}</span
                >
                <a
                  style="margin-top: -5px"
                  :download="itemSon.coursewareName"
                  :href="itemSon.courseware"
                  target="_blank"
                  ><span class="dwon"
                    ><img
                      src="@/assets/images/teaching/kj-ico.png"
                      alt="课件下载"
                      title="课件下载"
                    /> </span
                ></a>
              </div>
            </div>
          </div>
          <!--        <el-divider style="border-color: #a8a9ab" />-->
          <!--        <div class="f16 fff mt30 mb30">公务员考试学习</div>-->
          <!--        <div class="course-description">-->
          <!--          公务员学习理解是一个持续的过程，涵盖行业前沿知识与实战技能，内容系统全面。通过名师讲解、案例分析及互动练习，帮助学员快速掌握核心能力，提升工作效率与竞争力。课程形式灵活，支持在线学习，适合不同阶段的职场人群。立即加入，开启你的职业进阶之路！-->
          <!--        </div>-->
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <div class="main-close" v-show="isClosed" @click="showBox">
      <el-icon color="#93999F" size="20" style="cursor: pointer" @click="show"
        ><Back
      /></el-icon>
    </div>
    <!-- 内容 -->
  </div>
</template>

<script setup lang="ts">
import { CloseBold, User, Back } from "@element-plus/icons-vue";
import { courseList } from "../../home/course";
import { getImageUrl } from "@/utils/index";

const emit = defineEmits(["update-data"]); // 定义一个事件

defineProps(["dataObj", "tearcher"]);

const handleUpdateWidth = (w) => {
  // 触发事件，并传递数据
  emit("update-width", w);
};

const updateParentData = (itemSon) => {
  // 触发事件，并传递数据
  emit("update-data", itemSon);
};
const isClosed = ref(false); // 新增状态变量

const close = () => {
  handleUpdateWidth(60);
  isClosed.value = true; // 隐藏主内容
};
const showBox = () => {
  handleUpdateWidth(500);
  isClosed.value = false; // 显示主内容
};
const list = courseList.splice(5);
</script>
<style lang="scss" scoped>
.main {
  padding: 30px;
  color: #fff;
  flex: 3;
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
  .main-box {
    width: 100%;
    height: 100%;
  }
  .main-close {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    z-index: 9;
  }
  .close {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    z-index: 9;
  }
  .introduce {
    line-height: 24px;
  }
  .related-courses {
    height: calc(100% - 50px - 112px);
    .course-item {
      img {
        border-radius: 10px;
        overflow: hidden;
      }
      .related-course-title {
        height: 40px;
        line-height: 20px;
      }
    }
  }
  .modal-box {
    height: calc(100% - 36px);
    overflow: auto;
    color: #a8a9ab;
    padding: 15px;
    .chapter-box {
      // max-height: 500px;
      // overflow-y: auto;
    }
    .chapter-video {
      cursor: pointer;
      margin: 4px 15px;
      padding: 0 0 0 25px;
      line-height: 24px;
      background: url("@/assets/images/video2.png") center left no-repeat;
      .dwon {
        display: inline-block;
        margin-left: 5px;
        line-height: 24px;
        img {
          vertical-align: middle;
          margin-top: -5px;
        }
      }
    }
    .active {
      color: #f53d3d;
      background: url("@/assets/images/video1.png") center left no-repeat;
    }

    .course-description {
      line-height: 24px;
    }
  }
}
</style>
